<!-- 组件之间的切换 -->

<!-- 引入vue框架 -->
<script src="./vue.js"></script>

<!-- 界面显示 -->
<div id="app">
    <a href=" " @click.prevent="flag? flag : flag =! flag">登录</a>
    <a href="#" @click.prevent="flag? flag =! flag : flag">注册</a>
    <login v-if="flag"></login>
    <reg v-else></reg>
</div>

<!-- 定义脚本 -->
<script>
    //注册登陆组件
    Vue.component("login", {
        template: '<div>登陆页面 <br><input type="text" placeholder="账号"><br><input type="password" placeholder="密码"></div> ',
    })
    //注册注册组件
    Vue.component("reg", {
        template: '<div>注册页面 <br><input type="text" placeholder="手机号/邮箱"><br><input type="password" placeholder="密码"></div>'
    })

    var vue = new Vue({
        el: '#app',

        data: {
            flag: true,
        }
    })
</script>

<!-- 页面样式 -->
<script>

</script>